import React from "react";

// import { connect } from "react-redux";
import { connect } from "../my-react-redux";

import actions from "../store/actions/count1";

class Counter1 extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.number}</p>
        <button onClick={this.props.add1}>+</button>
        <button onClick={this.props.minus1}>-</button>
        <button onClick={this.props.thunkAdd}>+ thunkAdd(thunk中间件)</button>
        <button onClick={this.props.promiseAdd}>
          + promiseAdd(promise中间件)
        </button>
        <button
          onClick={() => {
            setTimeout(() => {
              this.props.add1();
            }, 1000);
          }}
        >
          1秒后加1
        </button>
      </div>
    );
  }
}

// store 中的 state 映射为到组件的 props
const mapStateToProps = (state) => {
  console.log("state.count1", state.count1);
  return state.count1;
};

// store 中的 action 映射为到组件的 props
const mapDispatchToProps = actions;

// 类组件使用 connect
export default connect(mapStateToProps, mapDispatchToProps)(Counter1);
